/**
 * FORM 表单演示 - 根据选项1决定选项2
 * 给输入框添加按钮，点击弹窗输入框中的内容
 */
import React, { useState } from "react";
import { Form, Switch, Input, Button } from "antd";

const App: React.FC = () => {
  //表单
  const [form] = Form.useForm();

  //打印表单内容
  const show = () => {
    console.log(form.getFieldsValue());
  };

  //类型
  type FieldType = {
    passwords: boolean;
    input: string;
  };

  //默认值
  const defData = {
    passwords: false,
    input: "",
  };

  //创建变量并设默认值
  const [formData, setFormData] = useState(defData);

  //表单同步修改值
  const onValuesChange = (
    changedValues: Partial<FieldType>,
    _allValues: FieldType
  ) => {
    setFormData((prevState) => ({
      ...prevState,
      ...changedValues,
    }));
  };

  return (
    <Form
      form={form}
      name="dependencies"
      autoComplete="off"
      style={{ maxWidth: 600 }}
      layout="vertical"
      onValuesChange={onValuesChange}
    >
      <Form.Item>
        <h1>选项1控制选项2</h1>
      </Form.Item>
      <Form.Item<FieldType> label="Password" name="passwords">
        <Switch />
      </Form.Item>

      {formData.passwords !== false && (
        <>
          <Form.Item<FieldType> label="控制输入框" name="input">
            <Input />
          </Form.Item>
        </>
      )}

      <Form.Item>
        <Button onClick={show}>打印表单内容</Button>
      </Form.Item>
    </Form>
  );
};

export default App;
